<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2.5/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <canvas class="cavs" width="1000" height="1000"></canvas>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="4" class="logo">
                    <el-image style="width: 100px; height: 100px;border-radius: 50%;"
                              src="/statics/images/logo.gif" fit="fill">
                    </el-image>
                </el-col>
                <el-col :span="24">
                    <h2 style="font-size: 50px">心语博客站</h2>
                </el-col>
            </el-row>
        </el-header>
    </el-container>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules" autocomplete="off">
        <div class="user_login app">
            <div class="register-container">
                <h2>账户注册</h2>
                <div>
                    <div class="username">
                        <input required type="text" v-model="form.account">
                        <span class="bar"></span>
                        <label>Account</label>
                    </div>
                    <div class="email">
                        <input required type="text" v-model="form.email">
                        <span class="bar"></span>
                        <label>Email</label>
                    </div>
                    <div class="nickname">
                        <input required type="text" v-model="form.nickname">
                        <span class="bar"></span>
                        <label>Nickname</label>
                    </div>
                    <div class="password">
                        <input required type="password" v-model="form.password">
                        <span class="bar"></span>
                        <label>Password</label>
                    </div>
                    <div class="check-password">
                        <input required type="password" v-model="checkPassword">
                        <span class="bar"></span>
                        <label>Check Password</label>
                    </div>
                </div>
                <el-button type="primary" @click="onRegisterSubmit">注册</el-button>
                <a href="http://localhost:8080/login">
                    <el-button type="primary" @click="toggleRegister" style="margin-left: 0">返回登录</el-button>
                </a>
            </div>
        </div>
    </el-form>
</div>
<script src="/statics/js/request.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                form: {
                    account: "",
                    email: "",
                    password: "",
                    nickname: "",
                },
                checkPassword: "", // 存储确认密码
                rules: {
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
                    ],
                    nickname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            onRegisterSubmit() {  // 注意这里不需要参数 form
                this.$refs.form.validate((valid) => {  // 直接使用 this.$refs.form
                    if (valid) {
                        // 确认密码匹配
                        if (this.form.password !== this.checkPassword) {
                            this.$message.error('两次密码输入不一致');
                            return;
                        }
                        // 注册请求
                        request.post('/register', this.form, (res) => {
                            if (res === 1) {
                                this.$message.success("注册成功！");
                                setTimeout(() => {
                                    window.location.href = '/login';
                                }, 2000);
                            } else {
                                this.$message.error("注册失败！");
                            }
                        });
                    } else {
                        this.$message.error('请检查输入的字段');
                    }
                });
            },
        }
    });
</script>
<script src="/statics/js/jq.js"></script>
<script src="/statics/js/ban.js"></script>
<link rel="stylesheet" href="/statics/css/login.css">
</body>
</html>